<template>
  <div class="xtx-short-cut">
    <ul>
      <li><a @click.prevent="login">登录</a></li>
    </ul>
    <div class="test"></div>
  </div>
</template>

<script>
export default {
  name: "XtxShortCut",
  methods: {
    login() {
      alert("登录");
    },
  },
};
</script>

<!-- 添加了scoped属性后，样式变成了全局的 -->
<style scoped>
.xtx-short-cut {
  width: 500px;
  height: 50px;
  background-color: skyblue;
}
.test {
  width: 20px;
  height: 20px;
  background-color: red;
}
</style>